<template>
  <div class="slot-machine">
    <div class="slot" v-for="(slot, index) in list" ref="list" :key="index">
      <div class="slot__window">
        <div class="slot__wrap">
          <div
            class="slot__item" 
            v-for="(opt, idx) in slot.items"
            :key="`${index}_${idx}`"
          >
            <div class="slot__item_content">
              <img v-if="opt.level == 0" src="../assets/bg_color05.png" class="intsd"/>
              <img v-if="opt.level == 1" src="../assets/bg_color04.png" class="intsd"/>
              <img v-if="opt.level == 2" src="../assets/bg_color03.png" class="intsd"/>
              <img v-if="opt.level == 3" src="../assets/bg_color02.png" class="intsd"/>
              <img v-if="opt.level == 4" src="../assets/bg_color01.png" class="intsd"/>
              <img :src="opt.image" class="img_log" />
            </div>
          </div>
          <template v-for="(opt, idx) in slot.items">
            <div class="slot__item slot__item--copy" :key="idx" >
              <div class="slot__item_content">
              <img v-if="opt.level == 0" src="../assets/bg_color05.png" class="intsd"/>
              <img v-if="opt.level == 1" src="../assets/bg_color04.png" class="intsd"/>
              <img v-if="opt.level == 2" src="../assets/bg_color03.png" class="intsd"/>
              <img v-if="opt.level == 3" src="../assets/bg_color02.png" class="intsd"/>
              <img v-if="opt.level == 4" src="../assets/bg_color01.png" class="intsd"/>
              <img :src="opt.image" class="img_log"/>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <!-- <audio
      id="audio"
      preload="auto"
      autoplay="autoplay"
      :src="require('../assets/open.mp3')"
    ></audio> -->
  </div>
</template>

<script>
const next =
  window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  function (cb) {
    window.setTimeout(cb, 1000 / 60);
  };
export default {
  name: "Laofuji",
  props: ["list", "positions","result"],
  data() {
    return {
      prizeNum: 30, // 可视区域每列展示的奖品数
      opts: null,
      startedAt: null,
      times: "0",
      listOr: [],
    };
  },
  methods: {
    randomNum: function (minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    },
    childFun: function () {
      // console.log(this.positions)

      console.log(JSON.stringify(this.list) + "+++++++++++++++++++");
      var soundEffects = this.$store.state.user.soundEffects;
      // if (soundEffects == 0) {
      //   let audio = document.getElementById("audio");
      //   audio.play();
      // }
      if (this.opts) {
        // 增加动画过程中，再次点击开始，立即结束动画，且置为对应中将位置
        this.opts.forEach((opt) => {
          opt.isFinished = true;
          const pos = -opt.finalPos;
          opt.el.style.transform = "translateY(" + pos + "px)";
        });
        return;
      }
      this.opts = this.list.map((data, i) => {
        const slot = this.$refs.list[i]; // map(function(){})利用map便利slots的每一个选项组,最终得到return的返回值
        const itemHeight =
          document.getElementsByClassName("slot__item")[0].offsetWidth;
        // const choice = Math.floor(0.5* data.items.length); // 随机生成一个[0,data.items.length]的整数(floor向下取整)
        var t = this.positions;
        console.log(t);
        const choice = t - 3; // 随机生成一个[0,data.items.length]的整数(floor向下取整)
        // console.log("choice", i, data.items[choice])
        const opts = {
          el: slot.querySelector(".slot__wrap"), //指向奖项元素的父级
          finalPos: choice * itemHeight, // itemHeight 为每一个奖品滚动标签的高度
          startOffset: 2500 + 1 * 8000 + 1 * 100, // 影响转的圈数
          height: data.items.length * itemHeight,
          duration: 4500 + 1 * this.randomNum(100, 1000), // millisecondsi
          isFinished: false,
          t: Math.random() * 200, //间隔距离
        };
        this.listOr.push(opts.duration);
        var max = this.listOr[0];
        for (var i = 1; i < this.listOr.length; i++) {
          if (max < this.listOr[i]) {
            max = this.listOr[i];
          }
        }
        this.max = max;
        this.$store.commit("setMax", max);
        console.log(opts.duration + "sssssssssssss");
        return opts;
      });
      // console.log(this.opts) //这个时候this.opts已经和opts一模一样了
      var that = this;
      next(that.animate);
    },
    animate: function (timestamp) {
      if (!this.opts) return;
      // timestamp当前的方法持续的毫秒数
      if (this.startedAt == null) {
        this.startedAt = timestamp; // 动画初始时间
      }
      const timeDiff = timestamp - this.startedAt; //动画持续的时间
      // console.log(timestamp, this.opts+"=====================")
      var that = this;
      this.opts.forEach((opt) => {
        if (opt.isFinished) {
          return;
        }
        if(opt.duration>5000){
          opt.duration=5000
        }
        const timeRemaining = Math.max(opt.duration - timeDiff, 0); // 总的持续时间 - 动画持续时间 = 剩下的时间,0表示结束
        const power = 3;
        var offset = Math.floor(
          (Math.pow(timeRemaining, power) / Math.pow(opt.duration, power)) *
            opt.startOffset
        ); // Math.pow(timeRemaining, power)表示: timeRemaining 的3 次幂;
        const pos = Math.floor(
          1 * Math.floor((offset + opt.finalPos) % opt.height) + opt.t
        );
        opt.el.style.transform = "translateX(" + pos + "px)";
        return;
      });
      next(this.animate);
    },
  },
  mounted() {},
};
</script>

<style  scoped>
.slot-machine::after {
  content: "";
  width: 200px;
  /* background-image: linear-gradient(90deg,#706042,transparent); */
  background-image: url(../assets/game-zhezhao-bg.png);
  background-size: 100% 100%;
  transform: rotate(180deg);
  position: absolute;
  z-index: 999999;
  top: -5px;
  left: -2px;
  bottom: -2px;
}
.slot-machine::before {
  content: "";
  width: 200px;
  background-image: url(../assets/game-zhezhao-bg.png);
  background-size: 100% 100%;
  position: absolute;
  z-index: 999999;
  top: -5px;
  right: -2px;
  bottom: -2px;
}
.ingts {
  width: 291px;
  height: 199px;
}

.slot-machine {
  width: 2178px;
  height: auto;
  margin: 0 auto;
  position: relative;
  z-index: 9999;
  /* background-color: #007AFF; */
}
.slot {
  /* margin: 0.4em; */
  margin-bottom: 10px;
}
.slot__window {
  width: 2178px;
  height: 150px;
  overflow: hidden;
}
.intsd{
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.slot__wrap {
  display: flex;
  justify-content: flex-end;
}
.slot__item {
  /* padding-top: 20px; */
  width: 291px;
  height: 199px;
}
.slot__item:nth-child(2n) {
  margin: 0 10px;
}
.slot__item_content {
  margin: auto;
  width: 291px;
  height: 199px;
  position: relative;
}
.slot__item_content img {
  position: absolute;
  max-height:199px;
  width: auto;
  height: auto;
  top: 26%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:99px;
}
.img_log{
  position: absolute;
  max-width:180px;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  margin-top:20px;
  transform: translate(-50%, -50%);
  z-index:99px;
}
</style>
